<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var move = 10;
            var box1 = document.getElementById("box1");

            document.onkeydown = function (event) {
                event = event || window.event;

                switch (event.keyCode) {
                    case 37: // 左
                        box1.style.left = box1.offsetLeft - move + "px";
                        break;
                    case 38: // 上
                        box1.style.top = box1.offsetTop - move + "px";
                        break;
                    case 39: // 右
                        box1.style.left = box1.offsetLeft + move + "px";
                        break;
                    case 40: // 下
                        box1.style.top = box1.offsetTop + move + "px";
                        break;
                }
            };
        };
    </script>

</head>
<body>
<div id="box1"></div>
</body>


<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
    }

</style>
</html>
